import VueRouter from 'vue-router'
import tab1 from './components/tab1'
import tab2 from './components/tab2'
import tab3 from './components/tab3'
import tab4 from './components/tab4'
import home from './components/home'
import project from './components/project'
import operation from './components/operation'
import sub1 from './components/subcomponents/sub1'
import sub2 from './components/subcomponents/sub2'
import sub3 from './components/subcomponents/sub3'
import login from './components/login'
import first from './components/first'

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/', component: login },
    { path: '/login', component: login },
    { path: '/vue',
      component: first,
      children: [
        { path: '/vue/', component: home },
        { path: '/vue/home', component: home },
        { path: '/vue/project',
          component: project,
          children: [
            {
              // 当 /user/:id/profile 匹配成功，
              // UserProfile 会被渲染在 User 的 <router-view> 中
              path: '',
              component: sub1
            },
            {
              // 当 /user/:id/profile 匹配成功，
              // UserProfile 会被渲染在 User 的 <router-view> 中
              path: 'sub1',
              component: sub1
            },
            {
              // 当 /user/:id/posts 匹配成功
              // UserPosts 会被渲染在 User 的 <router-view> 中
              path: 'sub2',
              component: sub2
            },
            {
              // 当 /user/:id/posts 匹配成功
              // UserPosts 会被渲染在 User 的 <router-view> 中
              path: 'sub3',
              component: sub3
            }
          ]
        },
        { path: '/vue/operation', component: operation }
      ]
    },
    { path: '/tab3', component: tab3 },
    { path: '/tab4', component: tab4 }
  ],
  linkActiveClass: 'is-selected'
})
export default router
